
<template>
  <div class="modify">
    <van-nav-bar
      left-arrow
      name="cross"
      left-text="修改密码"
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <div class="content">备注：密码由6-12位字母或数字组成</div>
    <van-form @submit="onSubmit" ref="regForm">
      <!-- field 字段 -->
      <van-field
        v-model="username"
        name="username"
        clearable
        label="原密码"
        placeholder="请输入原密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            validator: (e) => /^\w{6,12}$/.test(e),
            message: '密码格式错误,需要是6-12位的字母或数字',
          },
        ]"
      />

      <van-field
        v-model="password"
        name="password"
        clearable
        label="新密码"
        placeholder="请输入新密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            validator: (e) => /^\w{6,12}$/.test(e),
            message: '密码格式错误,需要是6-12位的字母或数字',
          },
        ]"
      />
      <van-field
        v-model="password"
        name="password"
        clearable
        label="确认密码"
        placeholder="再次输入新密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            validator: (e) => /^\w{6,12}$/.test(e),
            message: '密码格式错误,需要是6-12位的字母或数字',
          },
        ]"
      />

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >完成</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { updatePwd } from "@/api/user";
import { mapState } from "vuex";
import { Form } from "vant";
import { Field } from "vant";
import { Button } from "vant";
export default {
  data() {
    return {
      user: [],
      show: true,
      username: "",
      password: "",
    };
  },

  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
  },
  computed: {
    ...mapState(["cate", "uid", "userInfo"]),
  },
  //   created() {
  //     this.$store.dispatch("getCate");
  //   },
  mounted() {},
  methods: {
    onSubmit(values) {
      let { cate_id, uid, userInfo } = this;
      let { nickname } = userInfo;

      updatePwd(values).then((res) => {
        console.log(res);
        localStorage.setItem("uid", JSON.stringify(uid));
      });

      //   let { uid } = this;
      if (!uid) {
        this.$toast("请先登录");
        setTimeout((v) => {
          this.$router.push("/login");
        }, 500);
        return;
      } else {
      }
      //   updatePwd({
      //     ...values,
      //     cate_id,
      //     author: nickname,
      //     author_id: uid,
      //   }).then((res) => {
      //     console.log(res);
      //   });
    },
  },
};
</script>
<style lang="less">
.modify {
  background-color: @color3;
  height: @height;
  .content {
    padding: 13px 20px;
    font-size: 14px;
  }
  .van-nav-bar {
    background-color: @color2;
  }
  .van-button--round {
    border-radius: 0;
  }
  .van-button--info {
    background-color: @colorn;
    border: 1px solid @colorn;
    border-radius: 13px;
  }
  .van-button--small {
    height: 6.53333vw;
  }
  .van-button--primary {
    color: @color5;
    background-color: @color4;
    border: 1px solid @color4;
    border-radius: 20px;
  }
  .van-nav-bar__text,
  .van-nav-bar .van-icon {
    color: #000;
    font-size: 25px;
    font-weight: bold;
  }
}
</style>